<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>网易云音乐</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    
    <style>
     
    /* 头部样式 */
    #firstHeader {background-color:  #D43C33;}
    #secHeader {background-color:  #D43C33;}
    #thridHeader {background-color:  #D43C33;}
    #fortheader {background-color:  #D43C33;}

    .topbar {background: #D43C33; height:50px; border-bottom: 1px solid #DDDFE3;position: relative;}
    .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
    .hr01, .hr02 {height: 28px;}
    .headerico {padding: 11px 15px 11px 15px;}
    .headericohover {background: #DADDE0;}
    .fr{float: right;}
    .fl{float: left;}
    .pa {position: absolute;}
    img {vertical-align: top;}

     /*第一头部*/
    .egret-header-box {height: 50px;}
    .egret-img img {height: 30px;padding: 10px;}
    .egret-header-search {background-color: #fff; position: absolute; left: 60px; right: 20px; height: 34px; margin-top: 8px;border-radius: 4px;}
    .egret-header-search img {margin-left: 30px; height: 20px; margin-top: 7px;}
    .egret-header-search input {line-height: 24px;font-size: 14px;padding-top: 5px;}
    .egret-header-search input:focus {/*border:0;*/ outline:none;}

     /* 第二头部 */
    .egret-header-text {line-height: 50px;color: #fff;font-size: 16px;padding: 0 10px;}
    .egret-header-title {position: absolute;width: 100%;text-align: center;line-height: 50px;color: #fff;font-size: 20px;}


    /* 第三头部 */
    .egret-switchframe {position: absolute; left: 90px; right: 90px;background-color: #fcfcfc;text-align: center;height: 30px;line-height: 30px;bottom: 10px;border-radius: 4px;color: #fff;border: 1px solid #fff;}
    .egret-switchframe div {width: 50%;display: inline-block;color: #fff;background-color: #D43C33;}
    .egret-switchframe div:first-child {border-radius: 4px 0 0 4px;}
    .egret-switchframe div:last-child {border-radius: 0px 4px 4px 0px;}
    .egret-switchframe-selectswitch {background-color: #fff !important;color: #D43C33 !important;}

     /* 头部切换样式 */
     .titlebar {display: none;}
     .activebar {display: block;}
     
     /* 底部切换按钮样式 */
     ul {display: -webkit-box; display: -webkit-flex; display: flex; }
     #footer {height: 51px; /*line-height: 50px;*/ background-color: #413A36;border-top: 1px solid #332E2A; }
     #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; /*height: 40px;*/}

     /* 选项卡样式 */
     .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
     .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
     .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
     .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}

     /********************/
     /* 底部按钮原始样式 */
     /********************/
     .bbtn01 {background: url(./image/main_index01.png) no-repeat center 4px; }
     .bbtn02 {background: url(./image/main_index02.png) no-repeat center 4px; }
     .bbtn03 {background: url(./image/main_index03.png) no-repeat center 4px; }
     .bbtn04 {background: url(./image/main_index04.png) no-repeat center 4px; }
     .bottom_btn {width: 99%; /*height: 43px;*/padding-top: 21px;background-position-y: 4px; background-size: 24px;  font-size: 10px; color: #A5A5A5;}
     
     /* 底部按钮激活样式 */
     .activebtn0 {/*background: url(./image/main_index01pressed.png) no-repeat center 4px; */}
     .activebtn1 {/*background: url(./image/main_index02pressed.png) no-repeat center 4px; */}
     .activebtn2 {/*background: url(./image/main_index03pressed.png) no-repeat center 4px; */}
     .activebtn3 {/*background: url(./image/main_index04pressed.png) no-repeat center 4px; */}
     .activebtn {color:#fff; background-size: 24px; background-color: #D33A31;}
     .bottomhover {background-color: #46494B;}

     /* 本地刷新图标 */
     #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}


.navbar {display: -webkit-box; -webkit-box-orient: horizontal; position: relative; height: 40px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #e0e0e0; }
    .navbar-item {display: block; -webkit-box-flex: 1; width: 100%; line-height: 40px;  font-size: 16px; text-align: center;color: #000; }
    .navbar-item-hov {background-color: rgba(254,242,228,0.7); }
    .navbar-item-active {color: #D43C33; }
    #navmark {position: absolute; left: 0px; bottom: 0px; -webkit-transition: 300ms; text-align: center; height: 2px;background-color: #D43C33;}



    </style>
</head>
<body>
    <div id="wrap">
        <!-- 第一头部 -->
        <div id="firstHeader" class="titlebar activebar">
            <div class="egret-header topbar normalHeader">
                <div class="egret-header-box egret-img fl" onclick="openfindmusic()"><img src="./image/searchvoice.png" alt=""></div>
                <div class="egret-header-box">
                    <div class="egret-header-search">
                        <img src="./image/header_search.png" alt="">
                        <input type="text" placeholder="搜索音乐、歌词、电台">
                    </div>
                </div>
            </div>

            <nav class="navbar" id="firstHeaderIndex">
                <a id="navbar-item-recommend" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(0);">推荐</a>
                <a id="navbar-item-rank" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(1);">歌单</a>
                <a id="navbar-item-favorite" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(2);">主播电台</a>
                <a id="navbar-item-ranklist" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(3);">排行榜</a>
                <mark id="navmark"></mark>
            </nav>

        </div>
      
        <!-- 第二头部 -->
        <div id="secHeader" class="titlebar">
            <div class="egret-header topbar">
                <div class="egret-header-title">我的音乐</div>
                <div class="egret-header-text fl pa" onclick="openframe02more ()">更多</div>
            </div>
        </div>

        <!-- 第三头部 -->
        <div id="thridHeader" class="titlebar">
            <div class="egret-header topbar">
                <div class="egret-switchframe">
                    <div class="egret-switchframe-leftbtn egret-switchframe-selectswitch" onclick="setSecondFramegroupIndex(0)">关注</div><div class="egret-switchframe-rightbtn" onclick="setSecondFramegroupIndex(1)">身边</div>
                </div>
                <div  class="egret-img"><img src="./image/frame03cover/cm2_top_icn_invite_prs.png" alt="" onclick="addfriend()" ></div>
            </div>
        </div>


        <!-- 第四头部 -->
        <div id="fortheader" class="titlebar">
            <div class="egret-header topbar">
                <div class="egret-header-title">账号</div>
            </div>
        </div>
      
      <div id="main">
        
      </div>
      
      <div id="footer">
        <ul>
          <li tapmode="activebtn0 activebtn" onclick="switchframe('first_frame')">
            <a class="bottom_btn bbtn01 weixin activebtn activebtn0">发现音乐</a>
          </li>

          <li tapmode="activebtn1 activebtn" onclick="switchframe('second_frame')">
            <a class="bottom_btn bbtn02 communicate">我的音乐</a>
          </li>

          <li tapmode="activebtn2 activebtn" onclick="switchframe('third_frame')">
            <a class="bottom_btn bbtn03 discover">朋友</a>
          </li>

          <li tapmode="activebtn3 activebtn" onclick="switchframe('forth_frame')">
            <a class="bottom_btn bbtn04 home">账号</a>
          </li>
        </ul>
      </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
var firstHeader = $api.byId('firstHeader');
var secHeader = $api.byId('secHeader');
var thirdHeader = $api.byId('thridHeader');
var fortheader = $api.byId('fortheader');
var firstHeaderOffset;
var firstHeaderIndexHeight;

var main      = $api.byId('main');
var mainPos   = $api.offset(main);

var footer    = $api.byId('footer');
var footerPos = $api.offset(footer);

var isFirstOpen = false;
var isSecondOpen = false;
var isThirdOpen = false;
var isForthOpen = false;

function emptyopt() {}

// 打开frame
function openframe02more () {
    api.openFrame({
        name: 'frame02more',
        url: './html/second_frame/frame02_more.html',
        rect: {
            x: 0,
            y: firstHeaderOffset.h,
            w: 'auto',
            h: 'auto'
        },
        bounces:false,
        delay: 200
    });
}

function openLeftgroup() {
    // var footer = $api.byId('footer');
    // var footerPos = $api.offset(footer);

    var thridHeader = document.getElementById('thridHeader');
    var thridHeader = $api.offset(thridHeader);

    // 清除右部class
    var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
    var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

    // 注意，类名的前面有一个空格
    rightbtn.className = 'egret-switchframe-rightbtn';
    leftbtn.className  = 'egret-switchframe-leftbtn egret-switchframe-selectswitch';

    api.openFrame({
        name: 'frame0301',
        url: './html/third_frame/frame0301.html',
        rect: {
            x: 0,
            y: thridHeader.h,
            w: 'auto',
            h: (api.frameHeight - footerPos.h - thridHeader.h)
        },
        bounces: false,
        delay: 200
    });
}

function openRightgroup() {
    // var footer = $api.byId('footer');
    // var footerPos = $api.offset(footer);

    var thridHeader = document.getElementById('thridHeader');
    var thridHeader = $api.offset(thridHeader);

    // 清除左部class
    var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
    var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

    rightbtn.className = 'egret-switchframe-rightbtn egret-switchframe-selectswitch';
    leftbtn.className  = 'egret-switchframe-leftbtn';

    api.openFrame({
        name: 'frame0302',
        url: './html/third_frame/frame0302.html',
        rect: {
            x: 0,
            y: thridHeader.h,
            w: 'auto',
            h: (api.frameHeight - footerPos.h - thridHeader.h)
        },
        bounces: false,
        delay: 200
    });
}

function addfriend () {
    api.openWin({
        name: 'addfriend',
        url: './html/third_frame/addfriend.html',
        bounces: false,
        opaque: false
    });
}
function openNewWindow(type) {
    api.openWin({
        name: type,
        url: './html/' + type + '.html',
        pageParam: {},
        bounces: false,
        opaque: false
    });
}

function openSearch() {
    api.openWin({
        name: 'search',
        url: './html/search.html',
        bounces: false,
        delay: 200
    });
}

function openfindmusic () {
    api.openWin({
        name: 'findmusic',
        url: './html/findmusic.html',
        bounces: false,
        delay: 200
    });
}

// 随意切换按钮
function randomSwitchBtn(name, index) {
    var lis = $api.domAll('.bottom_btn');
    var i = 0,
        len = lis.length;
    var curLi = lis[index];

    for (i; i < len; i++) {
        var thisLi = lis[i];
        if (thisLi === curLi) {
            $api.addCls(thisLi, 'activebtn');
            $api.addCls(thisLi, 'activebtn' + index);
            continue;
        } else {
            if ($api.hasCls(thisLi, 'activebtn')) {
                $api.removeCls(thisLi, 'activebtn');
                $api.removeCls(thisLi, 'activebtn' + i);
            }
        }
    }

    // 切换头部
    var lis = $api.domAll('.titlebar');
    var i = 0,
        len = lis.length;
    var curLi = lis[index];

    for (i; i < len; i++) {
        var thisLi = lis[i];
        if (thisLi === curLi) {
            $api.addCls(thisLi, 'activebar');
            $api.addCls(thisLi, 'activebar' + index);
            continue;
        } else {
            if ($api.hasCls(thisLi, 'activebar')) {
                $api.removeCls(thisLi, 'activebar');
                $api.removeCls(thisLi, 'activebar' + i);
            }
        }
    }
    
    $api.fixStatusBar( $api.dom( '.titlebar.activebar .topbar') );
}

// 隐藏所有的一级frame
function hideAllFrame() {
    // api.setFrameAttr({
    //     name: 'first_frame',
    //     hidden:true
    // });
    api.setFrameAttr({
        name: 'second_frame',
        hidden: true
    });
    // api.setFrameAttr({
    //     name: 'third_frame',
    //     hidden: true
    // });
    api.setFrameGroupAttr({
        name: 'framegroup01',
        hidden: true
    });
    api.setFrameGroupAttr({
        name: 'framegroup02',
        hidden: true
    });
    api.setFrameAttr({
        name: 'forth_frame',
        hidden: true
    });
    // api.setFrameAttr({
    //     name: 'frame0301',
    //     hidden: true
    // });
    // api.setFrameAttr({
    //     name: 'frame0302',
    //     hidden: true
    // });
}

// 自己修复ios显示frame的时候bug
// ios自己主动隐藏后，再open就不显示了
function showgroup(type) {
    api.setFrameGroupAttr({
        name: type ,
        hidden: false
    });
}

// 展示指定的frame
function showframe(type) {
    api.setFrameAttr({
        name: type,
        hidden: false
    });
}

function setFrameGroupIndex(frameIndex) {
    api.setFrameGroupIndex({
        name: 'framegroup01',
        index: frameIndex,
        scroll: true
    });
}

function setFrameGroupStatus(frameIndex) {

    switch (frameIndex) {
        case 0:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item navbar-item-active";
                $api.byId('navbar-item-rank').className      = "navbar-item";
                $api.byId('navbar-item-favorite').className  = "navbar-item";
                $api.byId('navbar-item-ranklist').className  = "navbar-item";
                var num = (api.winWidth / 4) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");

                break;
            }
        case 1:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className      = "navbar-item navbar-item-active";
                $api.byId('navbar-item-favorite').className  = "navbar-item";
                $api.byId('navbar-item-ranklist').className  = "navbar-item";
                var num = (api.winWidth / 4) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
        case 2:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className      = "navbar-item";
                $api.byId('navbar-item-favorite').className  = "navbar-item navbar-item-active";
                $api.byId('navbar-item-ranklist').className  = "navbar-item";
                var num = (api.winWidth / 4) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
        case 3:
            {
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className      = "navbar-item";
                $api.byId('navbar-item-favorite').className  = "navbar-item";
                $api.byId('navbar-item-ranklist').className  = "navbar-item navbar-item-active";
                var num = (api.winWidth / 4) * frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
        default:
            break;
    }
}

// 打开第一个framegroup
function openFirstFramegroup() {
    api.openFrameGroup({
        name: 'framegroup01',
        background: '#FFF',
        scrollEnabled: true,
        rect: {
            x: 0,
            y: firstHeaderOffset.h + firstHeaderIndexHeight,
            w: "auto",
            h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight - footerPos.h
        },
        index: 0,
        frames: [{
            name: 'frame01_recommand',
            url: './html/first_frame/frame01_recommand.html',
            bounces: false,
        }, {
            name: 'frame01_list',
            url: './html/first_frame/frame01_list.html',
            bounces: false,
        }, {
            name: 'frame01_radio',
            url: './html/first_frame/frame01_radio.html',
            bounces: false,
        }, {
            name: 'frame01_rank',
            url: './html/first_frame/frame01_rank.html',
            bounces: false,
        }]
    }, function(ret) {
        setFrameGroupStatus(ret.index);
    });
}

// -----------------------------------
// 第二个framegroup
// -----------------------------------
function setSecondFramegroupIndex(frameIndex) {
    if (frameIndex === 0) {
        var thridHeader = document.getElementById('thridHeader');
        var thridHeader = $api.offset(thridHeader);

        // 清除右部class
        var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
        var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

        // 注意，类名的前面有一个空格
        rightbtn.className = 'egret-switchframe-rightbtn';
        leftbtn.className  = 'egret-switchframe-leftbtn egret-switchframe-selectswitch';

    }
    else {
        var thridHeader = document.getElementById('thridHeader');
        var thridHeader = $api.offset(thridHeader);

        // 清除左部class
        var leftbtn  = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
        var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];

        rightbtn.className = 'egret-switchframe-rightbtn egret-switchframe-selectswitch';
        leftbtn.className  = 'egret-switchframe-leftbtn';        
    }

    api.setFrameGroupIndex({
        name: 'framegroup02',
        index: frameIndex,
        scroll: false
    });
}
// 打开第二个framegroup
function openSecondFramegroup() {
    api.openFrameGroup({
        name: 'framegroup02',
        background: '#FFF',
        scrollEnabled: false,
        rect: {
            x: 0,
            y: firstHeaderOffset.h,
            w: "auto",
            h: api.frameHeight - firstHeaderOffset.h - footerPos.h
        },
        index: 0,
        frames: [{
            name: 'frame03_attention',
            url: './html/third_frame/frame0301.html',
            bounces: false,
        }, {
            name: 'frame03_list',
            url: './html/third_frame/frame0302.html',
            bounces: false,
        }]
    }, function(ret) {
        
    });
}

// 打开frame
function openframeinstance(frame, marginTop, isBounce) {
    api.openFrame({
        name: frame,
        url: './html/' + frame + '/' + frame + '_body.html',
        rect: {
            x: 0,
            y: marginTop,
            w: 'auto',
            h: api.frameHeight - marginTop - footerPos.h
        },
        // pageParam: {name: marginTop + footerPos.h},
        bounces: false,
        vScrollBarEnabled: false,
        hScrollBarEnabled: false,
        delay: 200
    });
}

// 移动滑动块
function sliderbarCallback(id, num) {

    // 得到背景元素的宽度
    // var width=parseInt(window.getComputedStyle($api.byId('matchwidth'),null).width);
    var width = parseInt(api.frameWidth / 2);
    // api.alert({msg:width});
    if (num != 0) {
        num = width;
    }
    // 移动背景元素的宽度  在index.html不能获得 forth_frame.html上面的dom，虽然是在同一个手机屏幕上
    $api.css($api.byId(id), "-webkit-transform:translate(" + num + "px,0)");
}

// ===================================
// 响应底部按钮的切换frame
// ===================================
function switchframe(type) {
    // alert(firstHeaderOffset.h);

    switch (type) {
        case 'first_frame':
            randomSwitchBtn('first_frame', 0);
            hideAllFrame();
            if (isFirstOpen) {
                showgroup('framegroup01');
            }
            else {
                openFirstFramegroup();
                isFirstOpen = true;
            }
            // openframeinstance('first_frame', firstHeaderOffset.h, false);
            break;
        case 'second_frame':
            randomSwitchBtn('second_frame', 1);
            hideAllFrame();
            if (isSecondOpen) {
                showframe('second_frame');
            }
            else {
                openframeinstance('second_frame', firstHeaderOffset.h, false);
                isSecondOpen = true;
            }

            
            // showgroup('hot');
            break;
        case 'third_frame':
            randomSwitchBtn('third_frame', 2);
            hideAllFrame();
            if (isThirdOpen) {
                showgroup('framegroup02');
            }
            else {
                openSecondFramegroup();
                isThirdOpen = true;
            }
            
            // openframeinstance('third_frame', firstHeaderOffset.h, false);
            // openLeftgroup();
            // showframe('third_frame');
            break;
        case 'forth_frame':
            randomSwitchBtn('forth_frame', 3);
            hideAllFrame();
            if (isForthOpen) {
                showframe('forth_frame');
            }
            else {
                openframeinstance('forth_frame', firstHeaderOffset.h, false);
                isForthOpen = true;
            }
           
            // showgroup('forth_frame');
            break;
        default:
            break;
    }

}

// 完成首页初始化
apiready = function() {
    // 设置ios7的标题栏字体变亮，全局用一个就行了
    api.setStatusBarStyle({
        style: 'dark'
    });

    firstHeader = $api.byId('firstHeader');
    secHeader = $api.byId('secHeader');
    thirdHeader = $api.byId('thridHeader');
    fortheader = $api.byId('fortheader');

    var fortheader = $api.byId('fortheader');
    var firstHeaderIndex = $api.byId('firstHeaderIndex');

    $api.fixStatusBar( $api.dom( '.titlebar.activebar .topbar') );

    // TODO 一定记得修改
    firstHeaderOffset = $api.offset(firstHeader);
    firstHeaderIndexHeight = $api.offset(firstHeaderIndex).h;

    firstHeaderOffset.h -= firstHeaderIndexHeight;

    var main = $api.byId('main');
    var mainPos = $api.offset(main);

    var footer = $api.byId('footer');
    var footerPos = $api.offset(footer);

    // 第一次进入打开 first_frame body
    // api.openFrame ({
    //     name: 'first_frame',
    //     url: './html/first_frame/first_frame_body.html',
    //     rect:{
    //         x:0,
    //         y:firstHeaderOffset.h,
    //         w:'auto',
    //         h:api.frameHeight-firstHeaderOffset.h -footerPos.h
    //     },
    //     pageParam: {name: firstHeaderOffset.h + footerPos.h},
    //     bounces:false,
    //     vScrollBarEnabled:false,
    //     hScrollBarEnabled:false
    // });
    var scrollHeight = $api.dom('.navbar').offsetHeight;
    $api.byId('navmark').style.width = api.winWidth / 4 + 'px';
    isFirstOpen = true;
    openFirstFramegroup();

};
</script>
</html>